import QtQuick
import QtQuick.Controls 2.4
import QtQuick.Layouts 2.4
import QtQuick.Effects
import Qt.labs.settings 1.0
import QtGraphs
import QtCharts
import "components" as Components

/*
* 前端接口处
*/
ApplicationWindow {

    id: root

    // 给这个 QML 对象起一个名字（标识符），在其他地方可以通过 root 引用它

    // 使用主题中定义的主颜色作为当前元素的颜色
    color: theme.primaryColor
    height: 850           // 窗口的高度，单位是像素，这里设置为 800 像素
    title: "上位机助手"    // 窗口的标题栏文字，这里显示 "Evolve UI"

    visible: true         // 设置窗口是否可见，这里 true 表示启动时窗口是显示的
    width: 1200         // 窗口的宽度，单位是像素，这里设置为 1200 像素


    // FontLoader 用来加载自定义字体文件
    // 这里加载的是 Font Awesome 图标字体（solid 样式）
    // 加载完成后，可以通过 iconFont.name 在 Text 或 Label 中使用该字体
    FontLoader {
        id: iconFont
        // 给字体对象取名，方便引用
        source: "qrc:/src/fonts/fontawesome-free-6.7.2-desktop/otfs/Font Awesome 6 Free-Solid-900.otf"
    }

    // 引用自定义的 ETheme 组件
    // 用来管理全局主题（颜色、字体、样式等），方便其它组件统一使用
    Components.ETheme {
        id: theme

        // 给这个主题对象取名 theme，方便在其它地方访问
    }

    // 背景图片
    Image {
        id: background

        anchors.fill: parent              // 背景图填充整个父元素
        cache: false                      // 不缓存图片，每次都从源加载（适合动态背景）
        fillMode: Image.PreserveAspectCrop // 保持比例裁剪，保证铺满
        opacity: theme.backgroundOpacity    // 动态绑定透明度
        source: theme.backgroundImage     // 从 theme 中获取背景图路径
    }
    // ===================== 下拉栏点击自动回收 =====================
    MouseArea {
        id: globalClickCatcher
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton
        propagateComposedEvents: true   // 允许事件继续传给其他子控件

        onClicked: (mouse)=> {
            // 假设你有多个 EAccordion，需要一个一个判断
            if (dataBitsSelector.contains(mouse.x, mouse.y))
                return
            if (stopBitsSelector.contains(mouse.x, mouse.y))
                return
            if (paritySelector.contains(mouse.x, mouse.y))
                return
            if (controlSelector.contains(mouse.x, mouse.y))
                return
            if (setBaudRate.contains(mouse.x, mouse.y))
                return
            if (portSelector.contains(mouse.x, mouse.y))
                return
            if (connectionModeSelector.contains(mouse.x, mouse.y))
                return
            if (dataFireWater.contains(mouse.x, mouse.y))
                return

            // 点击到 UI 其他地方 → 自动收起
            dataBitsSelector.expanded = false
            stopBitsSelector.expanded = false
            paritySelector.expanded = false
            controlSelector.expanded = false
            setBaudRate.expanded = false
            portSelector.expanded = false
            connectionModeSelector.expanded = false
            dataFireWater.expanded = false
        }
    }
    // ===================== 异常处理栏 =====================
    MessageDialog {
        id: alertDialog
    }
    Connections {
        //串口打开异常
        target: Config  // 你的 C++ 对象，例如通过 setContextProperty 暴露
        function onSerialErrorOccurred(errorMsg) {   // 信号名首字母大写，自动生成 onX 处理器
            alertDialog.set(300, 150)
            alertDialog.show("串口错误", errorMsg)
        }

        function onSerialPortLost() {
            alertDialog.set(300, 150)
            alertDialog.show("丢失", "串口号已经丢失")
        }
    }


    //协议控件
    Item {
        id: agreementroot
        // width: root.width * 0.2      // 占窗口宽度的
        width: 240      // 占窗口宽度的
        height: root.height   // 占窗口高度的25%
        anchors.left: parent.left        //
        anchors.bottom: parent.bottom      // 保持底部对齐

        // Rectangle {
        //     anchors.fill: parent
        //     color: "red"
        //     opacity: 0.3
        // }

        // 左侧侧边栏毛玻璃卡片
        Components.EBlurCard {
            anchors.bottom: parent.bottom// 底部锚点与父项底部对齐（撑满高度）
            anchors.left: parent.left    // 左侧锚点与父项左边对齐
            // anchors.leftMargin: -20      // 左边偏移 -20，稍微移出父项边界
            anchors.top: parent.top      // 顶部锚点与父项顶部对齐
            blurSource: background       // 模糊效果的来源，使用上面定义的背景 Image
            borderRadius: 15             // 卡片四角圆角半径为 35
            height: parent.height        // 卡片的高度与父项相同（撑满高度）
            layer.enabled: true          // 启用图层，使得毛玻璃模糊效果生效
            width: parent.width                // 卡片的宽度
        }

        // // ===================== 时间显示组件 =====================
        //显示效果不好的
        // Components.ETimeDisplay {
        //     anchors.top: parent.top
        //     anchors.left: parent.left
        //     anchors.topMargin: 500
        //     anchors.leftMargin: 10
        // }


        // ===================== 左侧信息栏 =====================
        // ===================== 固定信息栏 =====================
        Rectangle {
            width: 50                  // 宽度
            height: 50                 // 高度
            color: "transparent"       // 背景透明（看不到矩形的底色）
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 100              // 左侧间距

            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 5               // 顶部间距为

            Text {
                text: "协议与连接"                        // 要显示的文字
                anchors.horizontalCenter: parent.horizontalCenter  // 横向居中
                anchors.verticalCenter: parent.verticalCenter      // 纵向居中
                font.pixelSize: 30                  // 字体大小 30 像素
                font.bold: true                     // 加粗
                font.family: "STXingkai"
                color: "#1E90FF"              // 字体颜色
            }

        }

        Rectangle {
            width: 30                  // 宽度
            height: 50                // 高度
            color: "transparent"       // 背景透明（看不到矩形的底色）
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 75              // 左侧间距

            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 50               // 顶部间距为

            Text {
                text: "数据引擎"                        // 要显示的文字
                anchors.horizontalCenter: parent.horizontalCenter  // 横向居中
                anchors.verticalCenter: parent.verticalCenter      // 纵向居中
                font.pixelSize: 20                 // 字体大小 30 像素
                font.bold: false                     // 加粗
                font.family: "STXingkai"
                color: "#000000"              // 字体颜色
            }
        }

        Rectangle {
            width: 30                  // 宽度
            height: 50                // 高度
            color: "transparent"       // 背景透明（看不到矩形的底色）
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 75              // 左侧间距

            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 120               // 顶部间距为

            Text {
                text: "数据接口"                        // 要显示的文字
                anchors.horizontalCenter: parent.horizontalCenter  // 横向居中
                anchors.verticalCenter: parent.verticalCenter      // 纵向居中
                font.pixelSize: 20                 // 字体大小 30 像素
                font.bold: false                     // 加粗
                font.family: "STXingkai"
                color: "#000000"              // 字体颜色
            }
        }

        // ===================== 左侧分割栏 =====================
        // 分割线 协议与连接线
        Rectangle {
            width: 175                          // 横线的宽度
            height: 3                           // 横线高度，也就是粗细
            color: "#d0d0d0"                    // 横线颜色
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 52              // 左侧间距

            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 55               // 顶部间距为
        }

        // ===================== 串口文字描述 =====================
        // 分割线 数据接口
        Rectangle {
            width: 175                          // 横线的宽度
            height: 3                           // 横线高度，也就是粗细
            color: "#d0d0d0"                    // 横线颜色
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 52              // 左侧间距

            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 205               // 顶部间距为
        }

        Rectangle {
            width: 50                  // 宽度
            height: 50                 // 高度
            color: "transparent"       // 背景透明（看不到矩形的底色）
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 90             // 左侧间距

            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 200               // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "串口" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "串口"

            Text {
                text: "串口参数配置"                        // 要显示的文字
                anchors.horizontalCenter: parent.horizontalCenter  // 横向居中
                anchors.verticalCenter: parent.verticalCenter      // 纵向居中
                font.pixelSize: 22                  // 字体大小 30 像素
                font.bold: true                     // 加粗
                font.family: "Microsoft YaHei"
                color: "#1E90FF"              // 字体颜色
            }
        }

        Rectangle {
            width: 30                  // 宽度
            height: 50                // 高度
            color: "transparent"       // 背景透明（看不到矩形的底色）
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 67              // 左侧间距

            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 235               // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "串口" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "串口"

            Text {
                text: "端口号"                        // 要显示的文字
                anchors.horizontalCenter: parent.horizontalCenter  // 横向居中
                anchors.verticalCenter: parent.verticalCenter      // 纵向居中
                font.pixelSize: 20                 // 字体大小 30 像素
                font.bold: false                     // 加粗
                font.family: "STXingkai"
                color: "#000000"              // 字体颜色
            }
        }

        Rectangle {
            //端口号描述
            width: 30                  // 宽度
            height: 50                // 高度
            color: "transparent"       // 背景透明（看不到矩形的底色）

            anchors.left: parent.left            // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 120              // 左侧间距

            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 265              // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "串口" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "串口"

            Text {
                id: portDescText
                anchors.horizontalCenter: parent.horizontalCenter  // 横向居中
                anchors.verticalCenter: parent.verticalCenter      // 纵向居中
                font.pixelSize: 15                 // 字体大小 30 像素
                font.bold: false                     // 加粗
                font.family: "SimHei"
                color: "#000000"              // 字体颜色
                text: Controller.currentPortDescription()          // 动态显示描述
            }
            // 当串口改变时刷新 text
            Connections {
                target: Config

                function onPortChanged() {
                    portDescText.text = Controller.currentPortDescription()
                    console.log("触发 portChanged 信号", portDescText.text)
                }
            }

            Component.onCompleted: {
                // 程序启动时更新一次
                portDescText.text = Controller.currentPortDescription()
            }
        }

        Rectangle {
            width: 30                  // 宽度
            height: 50                // 高度
            color: "transparent"       // 背景透明（看不到矩形的底色）
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 65              // 左侧间距
            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 300               // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "串口" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "串口"

            Text {
                text: "波特率"                        // 要显示的文字
                anchors.horizontalCenter: parent.horizontalCenter  // 横向居中
                anchors.verticalCenter: parent.verticalCenter      // 纵向居中
                font.pixelSize: 20                 // 字体大小 30 像素
                font.bold: false                     // 加粗
                font.family: "STXingkai"
                color: "#000000"              // 字体颜色
            }
        }

        Rectangle {
            width: 30                  // 宽度
            height: 50                // 高度
            color: "transparent"       // 背景透明（看不到矩形的底色）
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 75              // 左侧间距
            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 340               // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "串口" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "串口"

            Text {
                text: "数据流控"                        // 要显示的文字
                anchors.horizontalCenter: parent.horizontalCenter  // 横向居中
                anchors.verticalCenter: parent.verticalCenter      // 纵向居中
                font.pixelSize: 20                 // 字体大小 30 像素
                font.bold: false                     // 加粗
                font.family: "STXingkai"
                color: "#000000"              // 字体颜色
            }
        }

        Rectangle {
            width: 30                  // 宽度
            height: 50                // 高度
            color: "transparent"       // 背景透明（看不到矩形的底色）
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 65              // 左侧间距
            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 380               // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "串口" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "串口"

            Text {
                text: "校验位"                        // 要显示的文字
                anchors.horizontalCenter: parent.horizontalCenter  // 横向居中
                anchors.verticalCenter: parent.verticalCenter      // 纵向居中
                font.pixelSize: 20                 // 字体大小 30 像素
                font.bold: false                     // 加粗
                font.family: "STXingkai"
                color: "#000000"              // 字体颜色
            }
        }

        Rectangle {
            width: 30                  // 宽度
            height: 50                // 高度
            color: "transparent"       // 背景透明（看不到矩形的底色）
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 75              // 左侧间距
            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 420               // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "串口" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "串口"

            Text {
                text: "数据位数"                        // 要显示的文字
                anchors.horizontalCenter: parent.horizontalCenter  // 横向居中
                anchors.verticalCenter: parent.verticalCenter      // 纵向居中
                font.pixelSize: 20                 // 字体大小 30 像素
                font.bold: false                     // 加粗
                font.family: "STXingkai"
                color: "#000000"              // 字体颜色
            }
        }

        Rectangle {
            width: 30                  // 宽度
            height: 50                // 高度
            color: "transparent"       // 背景透明（看不到矩形的底色）
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 75              // 左侧间距

            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 460               // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "串口" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "串口"

            Text {
                text: "停止位数"                        // 要显示的文字
                anchors.horizontalCenter: parent.horizontalCenter  // 横向居中
                anchors.verticalCenter: parent.verticalCenter      // 纵向居中
                font.pixelSize: 20                 // 字体大小 30 像素
                font.bold: false                     // 加粗
                font.family: "STXingkai"
                color: "#000000"              // 字体颜色
            }
        }

        // ===================== UDP信息描述 =====================
        Rectangle {
            width: 50                  // 宽度
            height: 50                 // 高度
            color: "transparent"       // 背景透明（看不到矩形的底色）
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 90             // 左侧间距

            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 200               // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "UDP" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "UDP"

            Text {
                text: "UDP参数配置"                        // 要显示的文字
                anchors.horizontalCenter: parent.horizontalCenter  // 横向居中
                anchors.verticalCenter: parent.verticalCenter      // 纵向居中
                font.pixelSize: 22                  // 字体大小 30 像素
                font.bold: true                     // 加粗
                font.family: "Microsoft YaHei"
                color: "#1E90FF"              // 字体颜色
            }
        }

        Rectangle {
            width: 30                  // 宽度
            height: 50                // 高度
            color: "transparent"       // 背景透明（看不到矩形的底色）
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 120              // 左侧间距
            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 250               // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "UDP" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "UDP"

            Text {
                text: "远程IP"                        // 要显示的文字
                anchors.horizontalCenter: parent.horizontalCenter  // 横向居中
                anchors.verticalCenter: parent.verticalCenter      // 纵向居中
                font.pixelSize: 20                 // 字体大小 30 像素
                font.bold: false                     // 加粗
                font.family: "STXingkai"
                color: "#000000"              // 字体颜色
            }
        }

        Rectangle {
            width: 30                  // 宽度
            height: 50                // 高度
            color: "transparent"       // 背景透明（看不到矩形的底色）
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 65              // 左侧间距
            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 330               // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "UDP" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "UDP"

            Text {
                text: "远程端口"                        // 要显示的文字
                anchors.horizontalCenter: parent.horizontalCenter  // 横向居中
                anchors.verticalCenter: parent.verticalCenter      // 纵向居中
                font.pixelSize: 20                 // 字体大小 30 像素
                font.bold: false                     // 加粗
                font.family: "STXingkai"
                color: "#000000"              // 字体颜色
            }
        }

        Rectangle {
            width: 30                  // 宽度
            height: 50                // 高度
            color: "transparent"       // 背景透明（看不到矩形的底色）
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 65              // 左侧间距
            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 380               // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "UDP" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "UDP"

            Text {
                text: "本地端口"                        // 要显示的文字
                anchors.horizontalCenter: parent.horizontalCenter  // 横向居中
                anchors.verticalCenter: parent.verticalCenter      // 纵向居中
                font.pixelSize: 20                 // 字体大小 30 像素
                font.bold: false                     // 加粗
                font.family: "STXingkai"
                color: "#000000"              // 字体颜色
            }
        }
        // ===================== UDP输入栏 =====================

        Components.EInput {
            //IP地址
            width: 180
            height: 35
            radius: 5
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 42              // 左侧间距
            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 285               // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "UDP" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "UDP"

            placeholderText: ""
            passwordField: false

            Component.onCompleted: {
                // 初始化时恢复上次保存的端口号
                text = Config.getStringValue("UdpIP", "127.0.0.1")
            }

            onTextChanged: {
                console.log("保存UDPIP (输入框触发):", text)
            }
        }

        Components.EInput {
            //远程端口
            width: 70
            height: 35
            radius: 5
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 150              // 左侧间距
            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 335               // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "UDP" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "UDP"

            placeholderText: ""
            passwordField: false
            Component.onCompleted: {
                // 初始化时恢复上次保存的端口号
                text = Config.getStringValue("UdpLocal", "1346")
            }

            onTextChanged: {
                console.log("UdpLocal (输入框触发):", text)
            }
        }


        Components.EInput {
            //本地端口
            width: 70
            height: 35
            radius: 5
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 150              // 左侧间距
            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 385               // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "UDP" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "UDP"

            placeholderText: ""
            passwordField: false

            Component.onCompleted: {
                // 初始化时恢复上次保存的端口号
                text = Config.getStringValue("UdpRemote", "1347")
            }

            onTextChanged: {
                console.log("UdpRemote (输入框触发):", text)
            }
        }

        // ===================== TCP客户端 =====================
        Rectangle {
            width: 50                  // 宽度
            height: 50                 // 高度
            color: "transparent"       // 背景透明（看不到矩形的底色）
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 90             // 左侧间距

            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 200               // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "TCP客户端" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "TCP客户端"

            Text {
                text: "TCP客户端参数配置"                        // 要显示的文字
                anchors.horizontalCenter: parent.horizontalCenter  // 横向居中
                anchors.verticalCenter: parent.verticalCenter      // 纵向居中
                font.pixelSize: 22                  // 字体大小 30 像素
                font.bold: true                     // 加粗
                font.family: "Microsoft YaHei"
                color: "#1E90FF"              // 字体颜色
            }
        }

        Rectangle {
            width: 30                  // 宽度
            height: 50                // 高度
            color: "transparent"       // 背景透明（看不到矩形的底色）
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 120              // 左侧间距
            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 250               // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "TCP客户端" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "TCP客户端"

            Text {
                text: "服务器IP"                        // 要显示的文字
                anchors.horizontalCenter: parent.horizontalCenter  // 横向居中
                anchors.verticalCenter: parent.verticalCenter      // 纵向居中
                font.pixelSize: 20                 // 字体大小 30 像素
                font.bold: false                     // 加粗
                font.family: "STXingkai"
                color: "#000000"              // 字体颜色
            }
        }

        Rectangle {
            width: 30                  // 宽度
            height: 50                // 高度
            color: "transparent"       // 背景透明（看不到矩形的底色）
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 65              // 左侧间距
            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 330               // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "TCP客户端" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "TCP客户端"

            Text {
                text: "网口端口"                        // 要显示的文字
                anchors.horizontalCenter: parent.horizontalCenter  // 横向居中
                anchors.verticalCenter: parent.verticalCenter      // 纵向居中
                font.pixelSize: 20                 // 字体大小 30 像素
                font.bold: false                     // 加粗
                font.family: "STXingkai"
                color: "#000000"              // 字体颜色
            }
        }

        Rectangle {
            width: 30                  // 宽度
            height: 50                // 高度
            color: "transparent"       // 背景透明（看不到矩形的底色）
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 65              // 左侧间距
            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 380               // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "TCP客户端" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "TCP客户端"

            Text {
                text: "握手数据"                        // 要显示的文字
                anchors.horizontalCenter: parent.horizontalCenter  // 横向居中
                anchors.verticalCenter: parent.verticalCenter      // 纵向居中
                font.pixelSize: 20                 // 字体大小 30 像素
                font.bold: false                     // 加粗
                font.family: "STXingkai"
                color: "#000000"              // 字体颜色
            }
        }

        // ===================== UDP输入栏 =====================
        Components.EInput {
            //IP地址
            width: 180
            height: 35
            radius: 5
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 42              // 左侧间距
            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 285               // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "TCP客户端" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "TCP客户端"

            placeholderText: ""
            passwordField: false

            Component.onCompleted: {
                // 初始化时恢复上次保存的端口号
                text = Config.getStringValue("TCPIP", "127.0.0.1")
            }

            onTextChanged: {
                console.log("TCPIP (输入框触发):", text)
            }
        }

        Components.EInput {
            //网络端口
            width: 70
            height: 35
            radius: 5
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 150              // 左侧间距
            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 335               // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "TCP客户端" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "TCP客户端"

            placeholderText: ""
            passwordField: false
            Component.onCompleted: {
                // 初始化时恢复上次保存的端口号
                text = Config.getStringValue("TCPLocal", "1346")
            }

            onTextChanged: {
                console.log("TCPLocal (输入框触发):", text)
            }
        }


        Components.EInput {
            //握手数据
            width: 70
            height: 35
            radius: 5
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 150              // 左侧间距
            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 385               // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "TCP客户端" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "TCP客户端"

            placeholderText: ""
            passwordField: false

            Component.onCompleted: {
                // 初始化时恢复上次保存的端口号
                text = Config.getStringValue("TCPRemote", "1347")
            }

            onTextChanged: {
                console.log("TCPRemote (输入框触发):", text)
            }
        }


        // ===================== TCP服务端 =====================
        Rectangle {
            width: 50                  // 宽度
            height: 50                 // 高度
            color: "transparent"       // 背景透明（看不到矩形的底色）
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 90             // 左侧间距

            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 200               // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "TCP服务端" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "TCP服务端"

            Text {
                text: "TCP服务端参数配置"                        // 要显示的文字
                anchors.horizontalCenter: parent.horizontalCenter  // 横向居中
                anchors.verticalCenter: parent.verticalCenter      // 纵向居中
                font.pixelSize: 22                  // 字体大小 30 像素
                font.bold: true                     // 加粗
                font.family: "Microsoft YaHei"
                color: "#1E90FF"              // 字体颜色
            }
        }

        Rectangle {
            width: 30                  // 宽度
            height: 50                // 高度
            color: "transparent"       // 背景透明（看不到矩形的底色）
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 65              // 左侧间距
            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 250               // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "TCP服务端" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "TCP服务端"

            Text {
                text: "监听端口"                        // 要显示的文字
                anchors.horizontalCenter: parent.horizontalCenter  // 横向居中
                anchors.verticalCenter: parent.verticalCenter      // 纵向居中
                font.pixelSize: 20                 // 字体大小 30 像素
                font.bold: false                     // 加粗
                font.family: "STXingkai"
                color: "#000000"              // 字体颜色
            }
        }

        Rectangle {
            width: 30                  // 宽度
            height: 50                // 高度
            color: "transparent"       // 背景透明（看不到矩形的底色）
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 65              // 左侧间距
            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 300               // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "TCP服务端" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "TCP服务端"

            Text {
                text: "连接数量"                        // 要显示的文字
                anchors.horizontalCenter: parent.horizontalCenter  // 横向居中
                anchors.verticalCenter: parent.verticalCenter      // 纵向居中
                font.pixelSize: 20                 // 字体大小 30 像素
                font.bold: false                     // 加粗
                font.family: "STXingkai"
                color: "#000000"              // 字体颜色
            }
        }

        Rectangle {
            width: 30                  // 宽度
            height: 50                // 高度
            color: "transparent"       // 背景透明（看不到矩形的底色）
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 65              // 左侧间距
            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 350               // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "TCP服务端" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "TCP服务端"

            Text {
                text: "当前连接"                        // 要显示的文字
                anchors.horizontalCenter: parent.horizontalCenter  // 横向居中
                anchors.verticalCenter: parent.verticalCenter      // 纵向居中
                font.pixelSize: 20                 // 字体大小 30 像素
                font.bold: false                     // 加粗
                font.family: "STXingkai"
                color: "#000000"              // 字体颜色
            }
        }

        Components.EInput {
            //监听端口
            width: 70
            height: 35
            radius: 5
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 150              // 左侧间距
            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 255               // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "TCP服务端" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "TCP服务端"

            placeholderText: ""
            passwordField: false

            Component.onCompleted: {
                // 初始化时恢复上次保存的端口号
                text = Config.getStringValue("TCPServerRemote", "1347")
            }

            onTextChanged: {
                console.log("TCPServerRemote (输入框触发):", text)
            }
        }

        Components.EInput {
            //连接数量
            width: 50
            height: 35
            radius: 5
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 170              // 左侧间距
            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 305               // 顶部间距为

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "TCP服务端" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "TCP服务端"

            placeholderText: ""
            passwordField: false
            readOnly: true

            Component.onCompleted: {
                // 初始化时恢复上次保存的端口号
                text = Config.getStringValue("TCPNumberRemote", "0")
            }

            onTextChanged: {
                console.log("TCPServerRemote (输入框触发):", text)
            }
        }
        /*
        * 当前连接下拉栏
        */
        Components.EAccordion {
            width: 85                              // 宽度
            headerHeight: 30                       // 高度
            radius: 5                              // 圆角
            title: currentStopBits                 // 标题文字

            useOptions: true
            options: []             // 可选项

            anchors.left: parent.left
            anchors.leftMargin: 135
            anchors.top: parent.top
            anchors.topMargin: 355

            //  当前停止位变量（本地状态）
            property string currentStopBits: "none"   // 默认值为 1 位停止位

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "TCP服务端" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "TCP服务端"

            Component.onCompleted: {
                // 初始化设置一次
            }
            //  当用户选择新选项时
            onOptionSelected: (text, index) => {

            }
        }


        // ===================== 左侧下拉栏 =====================

        // ===================== 串口下拉 =====================
        /*
        * 停止位选择组件
        */
        Components.EAccordion {
            id: stopBitsSelector                   // 给组件一个 id，方便引用

            width: 85                              // 宽度
            headerHeight: 30                       // 高度
            radius: 5                              // 圆角
            title: currentStopBits                 // 标题文字

            useOptions: true
            options: ["1", "1.5", "2"]             // 可选项

            anchors.left: parent.left
            anchors.leftMargin: 135
            anchors.top: parent.top
            anchors.topMargin: 470

            //  当前停止位变量（本地状态）
            property string currentStopBits: "1"   // 默认值为 1 位停止位
            property bool serialOpened: false

            enabled: connectionModeSelector.currentMode === "串口" && !serialOpened
            opacity: connectionModeSelector.currentMode === "串口"
                ? (serialOpened ? 0.4 : 1.0)
                : 0.0

            Component.onCompleted: {
                // 初始化设置一次
                title = Config.getStringValue("StopBits", "1")
                Config.setStopBits(currentStopBits)
            }

            //  当用户选择新选项时
            onOptionSelected: (text, index) => {
                if (!enabled)
                    return    // 串口打开时直接返回，不响应点击

                currentStopBits = text
                title = currentStopBits
                Config.setStopBits(currentStopBits)
                console.log("选中了:", text, "下标:", index)
            }

            //  自动响应 C++ 串口状态变化
            Connections {
                target: Config

                function onConnectionOpenedChanged(opened) {
                    if (connectionModeSelector.currentMode !== "串口")
                        return  // 当前不是串口模式，不做任何事
                    stopBitsSelector.serialOpened = opened

                }
            }
        }


        /*
        * 数据位数选择组件
        */
        Components.EAccordion {
            id: dataBitsSelector                     //  唯一 ID，方便在 Connections 中引用

            width: 85                                // 宽度
            headerHeight: 30                         // 高度
            radius: 5                                // 圆角
            title: currentDataBits                   // 标题绑定当前值

            useOptions: true
            options: ["8", "7", "6", "5"]            // 可选项

            anchors.left: parent.left
            anchors.leftMargin: 135
            anchors.top: parent.top
            anchors.topMargin: 430

            //  本地状态变量（初始值）
            property string currentDataBits: "8"
            property bool serialOpened: false

            enabled: connectionModeSelector.currentMode === "串口" && !serialOpened
            opacity: connectionModeSelector.currentMode === "串口"
                ? (serialOpened ? 0.4 : 1.0)
                : 0.0


            Component.onCompleted: {
                // 初始化时同步一次
                title = Config.getStringValue("DataBits", "8")
                Config.setDataBits(currentDataBits)
            }

            //  当用户选择新选项时
            onOptionSelected: (text, index) => {
                if (!enabled)
                    return // 串口打开时直接返回

                currentDataBits = text
                title = currentDataBits
                Config.setDataBits(currentDataBits)
                console.log("选中了:", text, "下标:", index)
            }

            //  响应 Config 的信号变化（串口状态）
            Connections {
                target: Config

                function onConnectionOpenedChanged(opened) {
                    if (connectionModeSelector.currentMode !== "串口")
                        return  // 当前不是串口模式，不做任何事
                    dataBitsSelector.serialOpened = opened
                }
            }
        }


        /*
         * 校验位选择组件
         */
        Components.EAccordion {
            id: paritySelector                      // 唯一 ID

            width: 85
            headerHeight: 30
            radius: 5
            title: currentParity                     // 标题绑定当前值

            useOptions: true
            options: ["None", "Even", "Odd", "Space", "Mark"] // 可选项

            anchors.left: parent.left
            anchors.leftMargin: 135
            anchors.top: parent.top
            anchors.topMargin: 390

            // 本地状态变量（初始值）
            property string currentParity: "None"
            property bool serialOpened: false

            enabled: connectionModeSelector.currentMode === "串口" && !serialOpened
            opacity: connectionModeSelector.currentMode === "串口"
                ? (serialOpened ? 0.4 : 1.0)
                : 0.0

            Component.onCompleted: {
                // 初始化时同步一次
                title = Config.getStringValue("Parity", "None")
                Config.setParity(currentParity)
            }

            // 当用户选择新选项时
            onOptionSelected: (text, index) => {
                if (!enabled)
                    return  // 串口打开时直接返回

                currentParity = text
                title = currentParity
                Config.setParity(currentParity)
                console.log("选中了:", text, "下标:", index)
            }

            // 响应 Config 的串口打开状态变化
            Connections {
                target: Config

                function onConnectionOpenedChanged(opened) {
                    if (connectionModeSelector.currentMode !== "串口")
                        return  // 当前不是串口模式，不做任何事
                    paritySelector.serialOpened = opened
                }
            }
        }


        /*
         * 数据流控选择组件
         */
        Components.EAccordion {
            id: controlSelector                  // 唯一 ID

            width: 85
            headerHeight: 30
            radius: 5
            title: currentControl                 // 标题绑定当前值

            useOptions: true
            options: ["None", "Harf", "Soft"]    // 可选项

            anchors.left: parent.left
            anchors.leftMargin: 135
            anchors.top: parent.top
            anchors.topMargin: 350

            // 本地状态变量
            property string currentControl: "None"
            property bool serialOpened: false

            enabled: connectionModeSelector.currentMode === "串口" && !serialOpened
            opacity: connectionModeSelector.currentMode === "串口"
                ? (serialOpened ? 0.4 : 1.0)
                : 0.0

            Component.onCompleted: {
                // 初始化同步
                title = Config.getStringValue("Control", "None")
                Config.setControl(currentControl)
            }

            // 当用户选择新选项时
            onOptionSelected: (text, index) => {
                if (!enabled) return  // 串口打开时直接返回

                currentControl = text
                title = currentControl
                Config.setControl(currentControl)
                console.log("选中了:", text, "下标:", index)
            }

            // 响应串口打开状态变化
            Connections {
                target: Config

                function onConnectionOpenedChanged(opened) {
                    if (connectionModeSelector.currentMode !== "串口")
                        return  // 当前不是串口模式，不做任何事
                    controlSelector.serialOpened = opened
                }
            }
        }


        /*
         * 波特率
         */
        Components.EAccordion {
            id: setBaudRate
            width: 95                       // 宽度
            headerHeight: 30                // 高度
            radius: 5                       // 圆角
            title: "9600"                       // 标题

            useOptions: true
            options: ["9600", "115200"]

            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 125              // 左侧间距
            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 310                // 顶部间距为

            // 本地状态变量
            property string currentControl: "9600"

            // 不用 visible 隐藏，改成：
            opacity: connectionModeSelector.currentMode === "串口" ? 1.0 : 0.0
            enabled: connectionModeSelector.currentMode === "串口"

            Component.onCompleted: {
                //初始化调用
                title = Config.getStringValue("BaudRate", "9600")
                console.log("波特率", title)
                Config.setBaudRate(title)
                Controller.UptateBaudRate(title)
            }

            onOptionSelected: function (text, index) {
                title = text
                console.log("选中了:", text, "下标:", index)
                console.log("当前title:", title)
                Config.setBaudRate(title)
                Controller.UptateBaudRate(title)
            }
        }


        /*
         * 串口端口号选择
         */
        Components.EAccordion {
            id: portSelector                   // 控件ID

            width: 95
            headerHeight: 30
            radius: 5
            title: currentPort                  // 标题绑定本地变量

            useOptions: true
            options: []                         // 动态填充

            anchors.left: parent.left
            anchors.leftMargin: 125
            anchors.top: parent.top
            anchors.topMargin: 245

            // 本地状态变量
            property string currentPort: ""
            property bool serialOpened: false

            enabled: connectionModeSelector.currentMode === "串口" && !serialOpened
            opacity: connectionModeSelector.currentMode === "串口"
                ? (serialOpened ? 0.4 : 1.0)
                : 0.0

            Component.onCompleted: {
                // 界面加载完成时扫描串口
                var ports = Controller.scanSerialPorts()
                options = ports

                if (ports.length > 0) {
                    currentPort = ports[0]        // 默认选择第一个端口
                    title = currentPort
                    Controller.setPortName(currentPort)
                    Config.setPortName(currentPort)
                    console.log("自动选择第一个端口:", currentPort)
                }
            }

            // 用户选择新端口
            onOptionSelected: (text, index) => {
                if (!enabled) return            // 串口打开时直接返回

                currentPort = text
                title = currentPort
                Controller.setPortName(currentPort)
                Config.setPortName(currentPort)
                console.log("选中了端口:", text, "下标:", index)
            }

            // 动态更新 options 的函数
            function updatePortOptions(newPorts) {
                // 用 slice() 创建新数组保证 QML ListView 绑定刷新
                options = newPorts.slice()

                // 如果当前端口不存在，选择第一个
                if (options.indexOf(currentPort) === -1) {
                    currentPort = options.length > 0 ? options[0] : ""
                    title = currentPort
                }
            }

            // 响应串口打开状态变化
            Connections {
                target: Config

                function onConnectionOpenedChanged(opened) {
                    if (connectionModeSelector.currentMode !== "串口")
                        return  // 当前不是串口模式，不做任何事
                    portSelector.serialOpened = opened
                }

                function onComListChanged(ports) {
                    console.log("接收到更新的端口列表:", ports)

                    // 保留当前端口，如果不存在则选第一个
                    if (ports.indexOf(portSelector.currentPort) === -1) {
                        portSelector.currentPort = ports.length > 0 ? ports[0] : ""
                        portSelector.title = portSelector.currentPort
                    }

                    // 更新选项列表
                    portSelector.updatePortOptions(ports)
                }

                // 串口丢失时触发
                function onSerialPortLost() {
                    console.warn("串口丢失，更新端口列表并刷新选择")

                    // 扫描最新可用端口
                    var ports = Controller.scanSerialPorts()

                    // 更新下拉列表
                    portSelector.updatePortOptions(ports)

                    // 刷新当前选中端口
                    if (ports.indexOf(portSelector.currentPort) !== -1) {
                        // 之前选择的端口仍然存在
                        console.log("原端口已丢失，选择第一个可用1")
                        portSelector.currentText = portSelector.currentPort
                        portSelector.title = portSelector.currentPort
                        Controller.setPortName(portSelector.currentPort)
                        Config.setPortName(portSelector.currentPort)
                    } else if (ports.length > 0) {
                        // 原端口已丢失，选择第一个可用
                        console.log("原端口已丢失，选择第一个可用2")
                        portSelector.currentPort = ports[0]
                        portSelector.currentText = ports[0]
                        portSelector.title = ports[0]
                        Controller.setPortName(portSelector.currentPort)
                        Config.setPortName(portSelector.currentPort)
                    } else {
                        // 没有可用端口
                        portSelector.currentPort = ""
                        portSelector.currentText = ""
                        portSelector.title = ""
                        Controller.setPortName("")
                        Config.setPortName("")
                    }

                    console.log("刷新后当前端口:", portSelector.currentPort)
                }


            }
        }

        // ==========================================


        // ===================== UDP =====================


        /*
         * 数据类型选择
         */
        Components.EAccordion {
            id: connectionModeSelector          // 控件ID

            width: 120
            headerHeight: 30
            radius: 5
            title: currentMode                  // 标题绑定本地变量
            useOptions: true
            options: ["串口", "UDP", "TCP客户端", "TCP服务端"]

            anchors.left: parent.left
            anchors.leftMargin: 50
            anchors.top: parent.top
            anchors.topMargin: 165

            // 本地状态变量
            property string currentMode: ""  // 默认选项

            Component.onCompleted: {
                // 从配置恢复上次的选择
                const saved = Config.getStringValue("ConnectionModes", "串口")
                currentMode = saved
                title = currentMode
                Config.setConnectionModes(currentMode)
                console.log("恢复连接模式:", currentMode)
            }

            // 用户选择新选项
            onOptionSelected: (text, index) => {
                currentMode = text
                title = currentMode
                Config.setConnectionModes(currentMode)
                console.log("选中了数据类型:", text, "下标:", index)
            }

            Connections {
                target: Config

                function onConnectionOpenedChanged(opened) {
                    connectionModeSelector.enabled = !opened
                    connectionModeSelector.opacity = opened ? 0.4 : 1.0
                    console.log("连接状态变化 => 模式选择器", opened ? "禁用" : "启用")
                }
            }
        }


        /*
        *  数据格式
        */
        Components.EAccordion {
            id: dataFireWater
            width: 120                        // 宽度
            headerHeight: 30                 // 高度
            radius: 5                       // 圆角
            title: "FireWater"               // 标题

            useOptions: true
            options: ["FireWater"]

            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 52              // 左侧间距
            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 95                // 顶部间距为

            onOptionSelected: {
                title = text
                console.log("选中了:", text, "下标:", index)
                console.log("当前title:", title)
            }
        }


        // ===================== 左侧按键栏 =====================
        //打开 || 关闭按钮
        Components.EButton {
            id: openMessage
            // 按钮对象 ID，可在 QML 内引用

            // ==== 自定义状态属性 ====
            property bool isOpen: false          // 按钮状态开关，true=打开，false=关闭
            property string mode: "串口"          // 模式，可选："串口"、"UDP"、"TCP客户端"、"TCP服务端"

            // ==== 布局属性 ====
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 5              // 左侧间距10像素

            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 5                // 顶部间距为0

            // ==== 样式属性 ====
            backgroundVisible: false             // 是否显示按钮背景，false=不显示背景
            fullImageMode: true                  // 图片铺满整个按钮区域，不留空白
            hoverScale: 1.2                      // 鼠标悬停时缩放比例

            iconSource: "qrc:/src/fonts/pic/guanbi.png" // 图片路径，显示图片图标

            implicitHeight: 40                   // 按钮默认高度，如果外部没有设置则生效
            implicitWidth: 40                    // 按钮默认宽度，如果外部没有设置则生效
            pressedScale: 0.90                    // 按钮按下时缩放比例
            radius: 0                            // 圆角半径为0，按钮边角为直角
            text: ""                             // 按钮文字为空，不显示文字
            useIconImage: true                   // 是否使用图片作为图标，true=使用图片

            function updateButton(opened) {
                isOpen = opened
                iconSource = opened ? "qrc:/src/fonts/pic/kaiqi.png" : "qrc:/src/fonts/pic/guanbi.png"
            }

            // ==== 点击事件处理 ====
            onClicked: {
                if (!isOpen) {
                    mode = Config.readConnectionModes()
                    switch (mode) {
                        case "串口":
                            updateButton(true)
                            Controller.openSerial()
                            console.log("串口被调用")
                            break;
                        case "UDP":
                            updateButton(true)
                            Controller.openUdp()
                            console.log("UDP被调用")
                            break;
                        case "TCP客户端":
                            // Controller.openTCPClient()
                            break;
                        case "TCP服务端":
                            // Controller.openTCPServer()
                            break;
                        default:
                            break;
                    }
                } else {
                    switch (mode) {
                        case "串口":
                            Controller.closeSerial()
                            break;
                        case "UDP":
                            Controller.closeUdp()
                            break;
                        case "TCP客户端":
                            // Controller.closeTCPClient()
                            break;
                        case "TCP服务端":
                            // Controller.closeTCPServer()
                            break;
                        default:
                            break;
                    }
                    updateButton(false)
                }
            }

            // 监听串口状态变化
            Connections {
                target: Config

                function onSerialErrorOccurred(errorMsg) {
                    if (openMessage.mode === "串口") openMessage.updateButton(false)
                }

                function onSerialPortLost() {
                    if (openMessage.mode === "串口") openMessage.updateButton(false)
                }

                function onUdpOpenedChanged(opened) {
                    if (openMessage.mode === "UDP") openMessage.updateButton(opened)
                }

                function onTcpClientOpenedChanged(opened) {
                    if (openMessage.mode === "TCP客户端") openMessage.updateButton(opened)
                }

                function onTcpServerOpenedChanged(opened) {
                    if (openMessage.mode === "TCP服务端") openMessage.updateButton(opened)
                }
            }
        }

        //协议与连接
        Components.EButton {
            id: protocolAndConnection

            // 按钮对象 ID，可在 QML 内引用

            // ==== 自定义状态属性 ====
            property bool isOpen: false          // 按钮状态开关，true=打开，false=关闭

            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 5              // 左侧间距像素

            // ==== 布局属性 ====
            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 50                // 顶部间距为

            // ==== 样式属性 ====
            backgroundVisible: false             // 是否显示按钮背景，false=不显示背景
            fullImageMode: true                  // 图片铺满整个按钮区域，不留空白
            hoverScale: 1.2                      // 鼠标悬停时缩放比例

            iconSource: "qrc:/src/fonts/pic/xieyi.png" // 图片路径，显示图片图标

            implicitHeight: 40                   // 按钮默认高度，如果外部没有设置则生效
            implicitWidth: 40                    // 按钮默认宽度，如果外部没有设置则生效
            pressedScale: 0.90                    // 按钮按下时缩放比例
            radius: 0                            // 圆角半径为0，按钮边角为直角
            text: ""                             // 按钮文字为空，不显示文字
            useIconImage: true                   // 是否使用图片作为图标，true=使用图片

            // ==== 点击事件处理 ====
            onClicked: {
                isOpen = !isOpen;                 // 每次点击切换状态
                if (isOpen) {

                    // TODO: 在这里添加打开状态的处理
                } else {

                    // TODO: 在这里添加关闭状态的处理
                }
            }
        }

        //侧边栏
        Components.ESwitchButton {
            backgroundVisible: false
            anchors.bottom: parent.bottom       // 底部与父元素底部对齐
            anchors.bottomMargin: 65           // 与父元素底部间距
            anchors.left: parent.left           // 左侧与父元素左侧对齐
            anchors.leftMargin: 40              // 与父元素左侧间距

            text: "侧边栏"
            onToggled: {
                console.log("开关状态:", checked)
                setSignal.toggle()
            }
        }


        // 按钮，用于切换主题
        Components.EButton {
            anchors.bottom: parent.bottom       // 底部与父元素底部对齐
            anchors.bottomMargin: 15           // 与父元素底部间距
            anchors.left: parent.left           // 左侧与父元素左侧对齐
            anchors.leftMargin: 40              // 与父元素左侧间距
            backgroundVisible: false            // 不显示按钮背景，只显示文本和图标
            iconCharacter: theme.isDark ? "\uf186" : "\uf185"       // 根据当前主题设置按钮图标
            iconRotateOnClick: true             // 点击时图标旋转动画
            text: theme.isDark ? "日间模式" : "夜间模式" // 根据当前主题设置按钮文字

            onClicked: theme.toggleTheme()      // 点击按钮时切换主题
        }

    }

    // ===================== 中间信息栏键栏 =====================
    /*
    *   发送栏
    */
    Item {
        id: sendroot
        width: root.width * 0.67      // 占窗口宽度的30%
        // height: root.height * 0.05   // 占窗口高度的25%
        height: 40
        anchors.horizontalCenter: parent.horizontalCenter// 水平居中
        anchors.horizontalCenterOffset: 65   // 向右偏移 20px
        anchors.bottom: parent.bottom// 对齐父控件底部
        anchors.bottomMargin: 5                 // 底部向上偏移

        // Rectangle {
        //     anchors.fill: parent
        //     color: "red"
        //     opacity: 0.3
        // }

        // 对外信号：发送数据
        signal sendRequested(string data)

        // === 输入框 ===
        ESerialInput {
            id: serialSendInput
            width: parent.width - 165
            height: parent.height
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            placeholderText: "请输入要发送的串口数据"
            autoClear: false
            maxHistory: 100

            onTextChanged: {
                if (stringSendButton.text === "HEX") {

                }
                console.log("输入发送的数据是", text)
            }
        }
        // === 按钮 ===

        Components.EButton {
            id: stringSendButton
            //字符串转换格式
            // 按钮对象 ID，可在 QML 内引用

            // ==== 自定义状态属性 ====

            property bool isString: false

            property bool isOpen: false          // 按钮状态开关，true=打开，false=关闭
            anchors.left: parent.left              // 右侧对齐父控件
            anchors.bottom: parent.bottom            // 底部对齐父控件

            // ==== 样式属性 ====
            fontSize: 20
            text: "ABC"                             // 按钮文字为空，不显示文字
            textLeftPadding: 0
            textColor: theme.isDark ? "#ffffff" : "#20c4a4"
            useIconImage: false
            iconCharacter: ""
            backgroundVisible: true             // 是否显示按钮背景，false=不显示背景
            fullImageMode: false                  // 图片铺满整个按钮区域，不留空白
            hoverScale: 1.15                      // 鼠标悬停时缩放比例

            // iconSource: "qrc:/src/fonts/pic/Send1.png" // 图片路径，显示图片图标

            width: parent.height + 15
            height: parent.height - 1
            pressedScale: 0.90                    // 按钮按下时缩放比例
            radius: 5                             // 圆角半径为0，按钮边角为直角


            // ==== 点击事件处理 ====
            onClicked: {
                isString = !isString
                if (isString) {
                    text = "HEX"
                    sendButton.hexAndAbc = "HEX"
                } else {
                    text = "ABC"
                    sendButton.hexAndAbc = "ABC"
                }
            }
        }

        Components.EButton {
            id: closeSendButton
            //清除按钮
            // 按钮对象 ID，可在 QML 内引用

            // ==== 自定义状态属性 ====
            property bool isOpen: false          // 按钮状态开关，true=打开，false=关闭

            anchors.right: parent.right              // 右侧对齐父控件
            anchors.bottom: parent.bottom            // 底部对齐父控件
            anchors.bottomMargin: 1                 // 向上偏移
            anchors.rightMargin: 43                 // 向左偏移

            // ==== 样式属性 ====
            backgroundVisible: true             // 是否显示按钮背景，false=不显示背景
            fullImageMode: true                  // 图片铺满整个按钮区域，不留空白
            hoverScale: 1.15                      // 鼠标悬停时缩放比例

            iconSource: theme.isDark ? "qrc:/src/fonts/pic/closeData.png" : "qrc:/src/fonts/pic/close.png" // 图片路径，显示图片图标

            width: parent.height - 2
            height: parent.height - 2
            pressedScale: 0.90                    // 按钮按下时缩放比例
            radius: 5                            // 圆角半径为0，按钮边角为直角
            text: ""                             // 按钮文字为空，不显示文字
            useIconImage: true                   // 是否使用图片作为图标，true=使用图片

            // ==== 点击事件处理 ====
            onClicked: {
                serialSendInput.text = ""
                console.log("发送框清除")
            }
        }

        Components.EButton {
            id: sendButton
            //发送按钮
            // 按钮对象 ID，可在 QML 内引用

            // ==== 自定义状态属性 ====
            property bool isOpen: false          // 按钮状态开关，true=打开，false=关闭
            property string hexAndAbc: "ABC"

            anchors.right: parent.right              // 右侧对齐父控件
            anchors.bottom: parent.bottom            // 底部对齐父控件
            anchors.rightMargin: parent.width * 0.002   // 按比例偏移
            anchors.bottomMargin: parent.height * 0.03  // 按比例偏移

            // ==== 样式属性 ====
            backgroundVisible: true             // 是否显示按钮背景，false=不显示背景
            fullImageMode: true                  // 图片铺满整个按钮区域，不留空白
            hoverScale: 1.15                      // 鼠标悬停时缩放比例

            iconSource: theme.isDark ? "qrc:/src/fonts/pic/Send3.png" : "qrc:/src/fonts/pic/Send2.png" // 图片路径，显示图片图标

            width: parent.height - 2
            height: parent.height - 2
            pressedScale: 0.90                    // 按钮按下时缩放比例
            radius: 5                            // 圆角半径为0，按钮边角为直角
            text: ""                             // 按钮文字为空，不显示文字
            useIconImage: true                   // 是否使用图片作为图标，true=使用图片

            // ==== 点击事件处理 ====
            onClicked: {
                if (hexAndAbc === "ABC") {
                    Controller.sendString(serialSendInput.text + "\r\n")
                    console.log("String发送数据是:", serialSendInput.text + "\r\n")
                } else if (hexAndAbc === "HEX") {
                    Controller.sendHex(serialSendInput.text)
                    console.log("Hex发送数据是:", serialSendInput.text)
                } else {
                    Controller.sendString(serialSendInput.text + "\r\n")
                }
            }
        }
    }

    /*
    * 接收栏
    */
    Item {
        id: readroot
        width: root.width * 0.67      // 占窗口宽度的30%
        height: root.height * 0.25   // 占窗口高度的25%
        // height: 200
        anchors.horizontalCenter: parent.horizontalCenter// 水平居中
        anchors.horizontalCenterOffset: 65   // 向右偏移 20px
        anchors.bottom: parent.bottom// 对齐父控件底部
        anchors.bottomMargin: 50                 // 底部向上偏移

        // Rectangle {
        //     anchors.fill: parent
        //     color: "red"
        //     opacity: 0.3
        // }

        // === 按钮 ===
        Components.EButton {
            id: stringReadButton
            //字符串转换格式
            // 按钮对象 ID，可在 QML 内引用

            // ==== 自定义状态属性 ====

            property bool isString: false
            property bool isOpen: false          // 按钮状态开关，true=打开，false=关闭
            anchors.left: parent.left              // 右侧对齐父控件
            anchors.top: parent.top            //

            // ==== 样式属性 ====
            fontSize: 20
            text: "Abc"                             // 按钮文字为空，不显示文字
            textLeftPadding: 0
            textColor: theme.isDark ? "#ffffff" : "#000000"
            useIconImage: false
            iconCharacter: ""
            backgroundVisible: true             // 是否显示按钮背景，false=不显示背景
            fullImageMode: false                  // 图片铺满整个按钮区域，不留空白
            hoverScale: 1.15                      // 鼠标悬停时缩放比例

            // iconSource: "qrc:/src/fonts/pic/Send1.png" // 图片路径，显示图片图标

            width: 55
            height: 40
            pressedScale: 0.90                    // 按钮按下时缩放比例
            radius: 5                             // 圆角半径为0，按钮边角为直角


            // ==== 点击事件处理 ====
            onClicked: {
                isString = !isString
                if (isString) {
                    text = "Hex"
                    // HexModeFunction()     // 进入 HEX 模式调用的函数
                } else {
                    text = "Abc"
                    // AbcModeFunction()     // 进入 ABC 模式调用的函数
                }
            }
        }

        Components.EButton {
            id: timestampButton
            //时间戳
            // 按钮对象 ID，可在 QML 内引用

            // ==== 自定义状态属性 ====
            property bool isOpen: true          // 按钮状态开关，true=打开，false=关闭

            anchors.left: parent.left
            anchors.top: parent.top
            anchors.bottomMargin: 0                 // 向上偏移
            anchors.leftMargin: stringReadButton.width + 3                 // 向左偏移

            // ==== 样式属性 ====
            backgroundVisible: true             // 是否显示按钮背景，false=不显示背景
            fullImageMode: true                  // 图片铺满整个按钮区域，不留空白
            hoverScale: 1.15                      // 鼠标悬停时缩放比例

            iconSource: theme.isDark ? "qrc:/src/fonts/pic/TimestampOpen.png" : "qrc:/src/fonts/pic/TimestampClose.png" // 图片路径，显示图片图标

            width: 40
            height: 40
            pressedScale: 0.90                    // 按钮按下时缩放比例
            radius: 5                            // 圆角半径为0，按钮边角为直角
            text: ""                             // 按钮文字为空，不显示文字
            useIconImage: true                   // 是否使用图片作为图标，true=使用图片

            // ==== 点击事件处理 ====
            onClicked: {
                isOpen = !isOpen
                if (isOpen) {
                    backgroundVisible = true
                } else {
                    backgroundVisible = false
                }
            }
        }


        Components.EButton {
            id: rxReadButton
            //RX显示
            // 按钮对象 ID，可在 QML 内引用

            // ==== 自定义状态属性 ====
            property bool isOpen: true          // 按钮状态开关，true=打开，false=关闭
            anchors.left: parent.left              // 右侧对齐父控件
            anchors.top: parent.top            //
            anchors.leftMargin: timestampButton.width + stringReadButton.width + 6
            // ==== 样式属性 ====
            fontSize: 20
            text: "Rx"                             // 按钮文字为空，不显示文字
            textLeftPadding: 0
            textColor: theme.isDark ? "#ffffff" : "#000000"
            useIconImage: false
            iconCharacter: ""
            backgroundVisible: true             // 是否显示按钮背景，false=不显示背景
            fullImageMode: false                  // 图片铺满整个按钮区域，不留空白
            hoverScale: 1.15                      // 鼠标悬停时缩放比例

            // iconSource: "qrc:/src/fonts/pic/Send1.png" // 图片路径，显示图片图标

            width: 40
            height: 40
            pressedScale: 0.90                    // 按钮按下时缩放比例
            radius: 5                             // 圆角半径为0，按钮边角为直角


            // ==== 点击事件处理 ====
            onClicked: {
                isOpen = !isOpen
                if (isOpen) {
                    backgroundVisible = true
                } else {
                    backgroundVisible = false
                }
            }
        }

        Components.EButton {
            id: txReadButton
            //TX显示
            // 按钮对象 ID，可在 QML 内引用

            // ==== 自定义状态属性 ====
            property bool isOpen: true          // 按钮状态开关，true=打开，false=关闭
            anchors.left: parent.left              // 右侧对齐父控件
            anchors.top: parent.top            //
            anchors.leftMargin: timestampButton.width + stringReadButton.width + rxReadButton.width + 8
            // ==== 样式属性 ====
            fontSize: 20
            text: "Tx"                             // 按钮文字为空，不显示文字
            textLeftPadding: 0
            textColor: theme.isDark ? "#ffffff" : "#000000"
            useIconImage: false
            iconCharacter: ""
            backgroundVisible: true             // 是否显示按钮背景，false=不显示背景
            fullImageMode: false                  // 图片铺满整个按钮区域，不留空白
            hoverScale: 1.15                      // 鼠标悬停时缩放比例

            // iconSource: "qrc:/src/fonts/pic/Send1.png" // 图片路径，显示图片图标

            width: 40
            height: 40
            pressedScale: 0.90                    // 按钮按下时缩放比例
            radius: 5                             // 圆角半径为0，按钮边角为直角


            // ==== 点击事件处理 ====
            onClicked: {
                isOpen = !isOpen
                if (isOpen) {
                    backgroundVisible = true
                } else {
                    backgroundVisible = false
                }
            }
        }


        Components.EButton {
            id: encodingButton
            //编码方式
            // 按钮对象 ID，可在 QML 内引用

            // ==== 自定义状态属性 ====
            property bool isOpen: false          // 按钮状态开关，true=打开，false=关闭
            property string encoding: "UTF-8"

            anchors.left: parent.left
            anchors.top: parent.top
            anchors.bottomMargin: 0                 // 向上偏移
            anchors.leftMargin: 220               // 向左偏移

            // ==== 样式属性 ====
            backgroundVisible: true             // 是否显示按钮背景，false=不显示背景
            fullImageMode: true                  // 图片铺满整个按钮区域，不留空白
            hoverScale: 1.15                      // 鼠标悬停时缩放比例

            iconSource: theme.isDark ? "qrc:/src/fonts/pic/encoding1.png" : "qrc:/src/fonts/pic/encoding.png" // 图片路径，显示图片图标

            width: 40
            height: 40
            pressedScale: 0.90                    // 按钮按下时缩放比例
            radius: 5                            // 圆角半径为0，按钮边角为直角
            text: ""                             // 按钮文字为空，不显示文字
            useIconImage: true                   // 是否使用图片作为图标，true=使用图片

            Component.onCompleted: {
                // 初始化设置一次
                encoding = Config.getStringValue("Encoding", "UTF-8")
                Config.setEncodedMode(encoding)
            switch (encoding) {
                case "UTF-8":
                    isOpen = false
                    utfLabel.text = "UTF-8"
                    break
                case "GBK":
                    isOpen = true
                    utfLabel.text = "GBK"
                    break
            }
            }


            // ==== 点击事件处理 ====
            onClicked: {
                isOpen = !isOpen
                if (isOpen) {
                    utfLabel.text = "GBK"
                    Config.setEncodedMode(utfLabel.text)
                } else {
                    utfLabel.text = "UTF-8"
                    Config.setEncodedMode(utfLabel.text)
                }
            }
        }

        Components.EButton {
            id: closeReadButton
            //清除按钮
            // 按钮对象 ID，可在 QML 内引用

            // ==== 自定义状态属性 ====
            property bool isOpen: false          // 按钮状态开关，true=打开，false=关闭

            anchors.right: parent.right              // 右侧对齐父控件
            anchors.top: parent.top            // 底部对齐父控件
            // anchors.bottomMargin: 1                 // 向上偏移
            // anchors.rightMargin: 43                 // 向左偏移

            // ==== 样式属性 ====
            backgroundVisible: true             // 是否显示按钮背景，false=不显示背景
            fullImageMode: true                  // 图片铺满整个按钮区域，不留空白
            hoverScale: 1.15                      // 鼠标悬停时缩放比例

            iconSource: theme.isDark ? "qrc:/src/fonts/pic/closeData.png" : "qrc:/src/fonts/pic/close.png" // 图片路径，显示图片图标

            width: 40
            height: 40
            pressedScale: 0.90                    // 按钮按下时缩放比例
            radius: 5                            // 圆角半径为0，按钮边角为直角
            text: ""                             // 按钮文字为空，不显示文字
            useIconImage: true                   // 是否使用图片作为图标，true=使用图片

            // ==== 点击事件处理 ====
            onClicked: {
                serialView.clearMessages()
                console.log("接收框清除")
            }
        }


        // === 文字描述 ===
        Rectangle {
            id: utf_Text
            width: 30                  // 宽度
            height: 40                // 高度
            color: "transparent"       // 背景透明（看不到矩形的底色）
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 280           // 左侧间距

            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 0               // 顶部间距为

            Text {
                id: utfLabel
                text: "UTF-8"                        // 要显示的文字
                anchors.horizontalCenter: parent.horizontalCenter  // 横向居中
                anchors.verticalCenter: parent.verticalCenter      // 纵向居中
                font.pixelSize: 20                 // 字体大小 30 像素
                font.bold: false                     // 加粗
                font.family: "SimHei"
                color: theme.isDark ? "#4DA6FF" : "#1E90FF"              // 字体颜色
            }
        }

        // === 消息接收框 ===
        /*
        * 接收消息框
        */
        Components.SerialMessageView {
            id: serialView
            panelWidth: parent.width
            panelHeight: parent.height - 40
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.bottom
            panelPadding: 12


            //  响应 Config 的信号变化（串口状态）
            Connections {
                target: Controller

                //接收监听
                function onReceiveText(Data) {
                    console.log("接收框的内容：", Data)
                    if (openMessage.isOpen === true) {
                        serialView.appendMessage("receive", Data)
                    }
                }

                //发送监听
                function onSendText(Data) {
                    serialView.appendMessage("send", Data)
                }
            }
        }
    }


    // ===================== 中间绘图栏 =====================
    // 整个绘图区域的容器
    Item {
        id: plotroot
        width: parent.width * 0.67
        height: parent.height * 0.695
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.horizontalCenterOffset: 65
        anchors.bottom: parent.bottom
        anchors.bottomMargin: parent.height * 0.305   // 高度越大，向上越多

        // 半透明红色背景
        // Rectangle {
        //     anchors.fill: parent
        //     color: "red"
        //     opacity: 0.3
        // }


        // ChartView: 显示曲线的控件
        ChartView {
            id: chart
            anchors.fill: parent
            antialiasing: true
            backgroundColor: Qt.rgba(1, 1, 1, 0.5)     // 整体背景透明

            // 定义坐标轴
            ValueAxis {
                id: axisX; min: -5; max: 5
            }
            ValueAxis {
                id: axisY; min: -5; max: 5
            }

            // 自定义 X 轴标题
            Text {
                text: "X 轴"                           // 显示的文字内容，这里是 X 轴的标题
                color: "white"                         // 文字颜色，这里设置为白色
                font.pixelSize: 16                      // 文字大小，以像素为单位
                anchors.horizontalCenter: chart.horizontalCenter // 水平方向居中对齐 ChartView
                anchors.bottom: chart.bottom            // 垂直方向底部对齐 ChartView 的底部
                anchors.bottomMargin: 8                 // 离 ChartView 底部的距离为 8 像素
            }


            // 自定义 Y 轴标题
            Text {
                text: "Y 轴"
                color: "white"
                font.pixelSize: 16
                rotation: -90
                anchors.verticalCenter: chart.verticalCenter
                anchors.left: chart.left
                anchors.leftMargin: 8
            }

            // 样条曲线 (LineSeries + pointsVisible)
            SplineSeries {
                name: "Spline"
                axisX: axisX
                axisY: axisY
                useOpenGL: true            // 提升渲染性能
                pointsVisible: true        // 显示每个数据点
                pointLabelsVisible: true   // 显示数值标签
                color: "blue"

                // 曲线数据点
                XYPoint {
                    x: 0; y: 0
                }
                XYPoint {
                    x: 1; y: 2
                }
                XYPoint {
                    x: 2; y: 1
                }
                XYPoint {
                    x: 3; y: 3
                }
                XYPoint {
                    x: 4; y: 2
                }
            }

            // ----------------------------
            // 鼠标拖拽平移和缩放功能
            // ----------------------------
            MouseArea {
                anchors.fill: parent
                property real lastX: 0
                property real lastY: 0
                hoverEnabled: true
                acceptedButtons: Qt.AllButtons

                // 鼠标按下记录初始位置
                onPressed: function (event) {
                    lastX = event.x
                    lastY = event.y
                }

                // 鼠标移动平移
                onPositionChanged: function (event) {
                    if (!event.buttons) return   // ✅ 只有鼠标按下才平移

                    var dx = event.x - lastX
                    var dy = event.y - lastY

                    // 横轴平移
                    var xRange = axisX.max - axisX.min
                    axisX.min -= dx / chart.width * xRange
                    axisX.max -= dx / chart.width * xRange

                    // 纵轴平移
                    var yRange = axisY.max - axisY.min
                    axisY.min += dy / chart.height * yRange
                    axisY.max += dy / chart.height * yRange

                    lastX = event.x
                    lastY = event.y
                }

                // 鼠标滚轮缩放
                onWheel: function (event) {
                    if (!axisX || !axisY) return

                    var factor = event.angleDelta.y > 0 ? 0.9 : 1.1

                    var xCenter = (axisX.min + axisX.max) / 2
                    var yCenter = (axisY.min + axisY.max) / 2

                    var xRange = (axisX.max - axisX.min) * factor
                    var yRange = (axisY.max - axisY.min) * factor

                    // 限制最小/最大范围
                    var minRange = 0.01
                    var maxRangeX = 100
                    var maxRangeY = 100
                    xRange = Math.max(minRange, Math.min(xRange, maxRangeX))
                    yRange = Math.max(minRange, Math.min(yRange, maxRangeY))

                    axisX.min = xCenter - xRange / 2
                    axisX.max = xCenter + xRange / 2
                    axisY.min = yCenter - yRange / 2
                    axisY.max = yCenter + yRange / 2
                }
            }
        }
    }

    Item {
        id: dataroot
        width: 130      // 占窗口宽度的
        height: root.height   // 占窗口高度的25%
        anchors.right: parent.right        //
        anchors.bottom: parent.bottom      // 保持底部对齐

        // //半透明红色背景
        // Rectangle {
        //     anchors.fill: parent
        //     color: "red"
        //     opacity: 0.3
        // }

        // 左侧侧边栏毛玻璃卡片
        Components.EBlurCard {
            anchors.bottom: parent.bottom// 底部锚点与父项底部对齐（撑满高度）
            anchors.right: parent.right    //
            anchors.top: parent.top      // 顶部锚点与父项顶部对齐
            blurSource: background       // 模糊效果的来源，使用上面定义的背景 Image
            borderRadius: 15             // 卡片四角圆角半径为
            height: parent.height        // 卡片的高度与父项相同（撑满高度）
            layer.enabled: true          // 启用图层，使得毛玻璃模糊效果生效
            width: parent.width                // 卡片的宽度
        }

        // 数据栏按钮：点击可切换数据显示“开/关”
        Components.EButton {
            id: motorDataButton
            backgroundVisible: false                // 不显示按钮背景
            anchors.right: parent.right             // 右对齐父元素
            anchors.top: parent.top                 // 顶部对齐父元素
            anchors.rightMargin: 7                  // 与右边保持 7px 间距
            text: "数据"                         // 按钮文字

            // 初始为“显示状态” → 使用眼睛图标
            property bool visibleState: true        // 自定义属性，用于记录当前状态
            iconCharacter: visibleState ? "\uf06e" : "\uf070" // 眼睛 / 闭眼 切换

            // 点击切换显示状态
            onClicked: {
                visibleState = !visibleState
                iconCharacter = visibleState ? "\uf06e" : "\uf070" // 更新图标
                // 在这里可以同时触发电机数据可见性切换，比如：
                // motorData.visible = visibleState
            }
        }

        // 分割线 协议与连接线
        Rectangle {
            width: 175                          // 横线的宽度
            height: 3                           // 横线高度，也就是粗细
            color: "#d0d0d0"                    // 横线颜色
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 0              // 左侧间距

            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 40               // 顶部间距为
        }
    }

    //侧边栏设置
    Components.EDrawer {
        id: setSignal
        width: 350
        opened: false
        backgroundVisible: true
        anchors.right: parent.right
        anchors.rightMargin: -30
        padding: 30

        // 暴露给外部访问的接口
        property alias rightDrawer: setSignal


        Rectangle {
            width: 30                  // 宽度
            height: 30                 // 高度
            color: "transparent"       // 背景透明（看不到矩形的底色）
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 100              // 左侧间距

            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 5               // 顶部间距为

            Text {
                text: "背景图片透明度"                        // 要显示的文字
                anchors.horizontalCenter: parent.horizontalCenter  // 横向居中
                anchors.verticalCenter: parent.verticalCenter      // 纵向居中
                font.pixelSize: 25                  // 字体大小 30 像素
                font.bold: true                     // 加粗
                font.family: "STXingkai"
                color: "#1E90FF"              // 字体颜色
            }
        }


        //设置是背景透明度
        Components.ESlider {
            backgroundVisible: false

            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 0              // 左侧间距

            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 35               // 顶部间距为

            width: 240
            text: ""
            value: 50
            onUserValueChanged: console.log("当前值：", value)
        }

        Rectangle {
            width: 30                  // 宽度
            height: 30                 // 高度
            color: "transparent"       // 背景透明（看不到矩形的底色）
            anchors.left: parent.left           // 按钮左侧对齐父控件左侧
            anchors.leftMargin: 100              // 左侧间距

            anchors.top: parent.top             // 按钮顶部对齐父控件顶部
            anchors.topMargin: 40               // 顶部间距为

            Text {
                text: "设置图片"                        // 要显示的文字
                anchors.horizontalCenter: parent.horizontalCenter  // 横向居中
                anchors.verticalCenter: parent.verticalCenter      // 纵向居中
                font.pixelSize: 25                  // 字体大小 30 像素
                font.bold: true                     // 加粗
                font.family: "STXingkai"
                color: "#1E90FF"              // 字体颜色
            }
        }
    }
}

